<template>
	<div class="map-view">
		<div :id="localUUID" class="maps"></div>
	</div>
</template>
<script>
import { Scene, PointLayer } from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
import { createUUID } from "@/common/js/mUtils";
// import { post } from '@/api/fetch'

export default {
	name: "MMap3dbar",
	data() {
		return {
			localUUID: createUUID(),
			data: [],
			pointLayer: null,
		};
	},
	props: {
		props: {
			type: Array,
			default: function() {
				return [
					{
						fields: [],
					},
				];
			},
		},
		width: {
			type: Number,
			default: 300,
		},
		height: {
			type: Number,
			default: 300,
		},
		ratio: {
			type: Number,
			default: 1,
		},
		uuid: String,
	},
	computed: {
		dataTrigger() {
			if (this.props[1].fields[0].value.dataJson.json) {
				let result = this.props[1].fields[0].value.dataJson.json;
				let dataobj = "{}";
				try {
					dataobj = JSON.parse(result);
				} catch (e) {
					this.$message.error("JSON格式有误请重试");
					dataobj = {};
				}
				return dataobj;
			} else {
				return [];
			}
		},
		modelTrigger() {
			return this.props[1].fields[0].value.dataJson.model;
		},
		getMapStyle() {
			return this.props[0].fields[3].value[0].value.value;
		},
		getZoom() {
			return this.props[0].fields[3].value[1].value.value;
		},
		getX() {
			return this.props[0].fields[3].value[2].value.value;
		},
		getY() {
			return this.props[0].fields[3].value[3].value.value;
		},
		// getpitch() {
		// 	return this.props[0].fields[3].value[4].value.value;
		// },
	},
	watch: {
		dataTrigger(val) {
			if (val && this.scene) {
				this.drawimg();
			}
		},
		modelTrigger(val) {
			if (this.scene) {
				this.drawimg();
			}
		},
		getMapStyle(val) {
			this.scene.setMapStyle(val);
		},
		getZoom(val) {
			this.scene.setZoom(val);
		},
		getX(val) {
			this.scene.setCenter([val, this.getY]);
		},
		getY(val) {
			this.scene.setCenter([this.getX, val]);
		},
		// getpitch(val) {
		// 	this.scene.setPitch(val);
		// },
	},
	mounted() {
		this.initMap();
	},
	methods: {
		setZoom(val) {
			this.props[0].fields[3].value[1].value.value = val;
		},
		setX(val) {
			this.props[0].fields[3].value[2].value.value = val;
		},
		setY(val) {
			this.props[0].fields[3].value[3].value.value = val;
		},
		// setpitch(val) {
		// 	this.props[0].fields[3].value[4].value.value = val;
		// },
		initMap() {
			this.scene && this.scene.destroy();
			const scene = new Scene({
				id: this.localUUID,
				logoVisible: false, // 是否显示logo
				map: new GaodeMap({
					pitch: 45,
					center: [this.getX, this.getY], // 地图初始中心经纬度 {Lnglat}
					style: this.getMapStyle, // 简化地图样式设置，dark,light,normal,blank 无底图
					zoom: this.getZoom, // 地图初始显示级别 {number} Mapbox （0-24） 高德 （2-19）
					rotation: 0,
					minZoom: 2, // 最小缩放等级
					maxZoom: 15, // 最大缩放等级
				}),
			});
			scene.on("loaded", () => {
				scene.on("moveend", () => {
					const pos = this.scene.getCenter();
					this.setX(pos.lng);
					this.setY(pos.lat);
				});
				scene.on("zoomend", () => {
					setTimeout(() => {
						this.setZoom(scene.getZoom() + 1);
					}, 1000);
				});
			});
			this.scene = scene;
			this.drawimg();
		},
		drawimg() {
			let pointLayer = this.pointLayer;
			if (pointLayer) {
				//PointLayer && pointLayer.remove();
			} else {
				pointLayer = new PointLayer();
				this.pointLayer = pointLayer;
			}
			pointLayer
				.source(this.dataTrigger, {
					parser: {
						type: "json",
						x: "location_x",
						y: "location_y",
					},
				})
				.active(true)
				.shape("name", [
					"cylinder",
					"triangleColumn",
					"hexagonColumn",
					"squareColumn",
				])
				.size("value", (h) => {
					return [6, 6, h / 0.2];
				})
				.color("name", ["#739DFF", "#61FCBF", "#FFDE74", "#FF896F"])
				.style({
					opacity: 1.0,
				});
			this.pointLayer = pointLayer;
			this.scene.addLayer(pointLayer);
		},
	},

	beforeDestroy() {
		clearTimeout(this.timer);
		this.scene && this.scene.destroy();
	},
};
</script>
<style lang="stylus" scoped>
.map-view
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    position: relative;
    margin: 10px;
.maps
    width 100%
    height 100%
</style>
